<template>
  <div class="dashboard">
    <!-- card卡片 -->
    <ul class="card">
      <li>
        <svg aria-hidden="true" class="svgIcon">
          <use xlink:href="#icon-qq"></use>
        </svg>
        <div class="text">956725345</div>
      </li>
      <li>
        <svg aria-hidden="true" class="svgIcon">
          <use xlink:href="#icon-wechat"></use>
        </svg>
        <div class="text">Y-UhihaObitio</div>
      </li>
      <li>
        <svg aria-hidden="true" class="svgIcon">
          <use xlink:href="#icon-bilibili"></use>
        </svg>
        <div class="text">无厘头的烂番薯</div>
      </li>
    </ul>
    <div class="echarts">
      <div class="chart1">
        <span>广东省</span>
        <div class="guangdong">
          <guangdong></guangdong>
        </div>
      </div>
      <div class="chart2">
        <span>中国地图</span>
        <div class="china">
          <chinaMap></chinaMap>
        </div>
      </div>
      <div class="chart3">
        <span>梅州市</span>
        <div class="meizhou">
          <meizhou></meizhou>
        </div>
      </div>
    </div>
    <!-- 折线图 -->
    <div class="chinamap" ref="echarts2"></div>
  </div>
</template>

<script>
// 导入echarts
import * as echarts from 'echarts'
// 导入中国地图组件
import chinaMap from '@/components/ChinaMap.vue'
// 导入广东地图组件
import guangdong from '@/components/GuangDong.vue'
// 导入梅州地图组件
import meizhou from '@/components/MeiZhou.vue'
export default {
  name: 'Dashboard',
  data: () => ({}),
  components: {
    chinaMap,
    guangdong,
    meizhou
  },
  methods: {
    // 初始化地图
    initEcharts2() {
      const echarts2 = echarts.init(this.$refs.echarts2)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {},
        toolbox: {
          show: true,
          // 折线图右上角显示的工具
          feature: {
            magicType: { type: ['line', 'bar'] }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [
          {
            name: '访问量',
            type: 'line',
            data: [10, 11, 13, 11, 12, 12, 9],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          },
          {
            name: '独立访客',
            type: 'line',
            data: [1, -2, 2, 5, 3, 2, 0],
            markPoint: {
              data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
            },
            markLine: {
              data: [
                { type: 'average', name: 'Avg' },
                [
                  {
                    symbol: 'none',
                    x: '90%',
                    yAxis: 'max'
                  },
                  {
                    symbol: 'circle',
                    label: {
                      position: 'start',
                      formatter: 'Max'
                    },
                    type: 'max',
                    name: '最高点'
                  }
                ]
              ]
            }
          }
        ]
      }
      echarts2.setOption(option)
    }
  },
  mounted() {
    this.initEcharts2()
  }
}
</script>

<style scoped lang="less">
.dashboard {
  padding: 0 20px 30px;
  .card {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 33%;
      height: 120px;
      padding: 0 40px;
      // margin-right: 20px;
      border: solid 1px #efefef;
      box-shadow: 0 2px 2px -2px #000000;
      border-radius: 5px;
      .svgIcon {
        width: 65px;
        height: 65px;
      }
      .text {
        color: #7693bd;
      }
    }
  }
  .echarts {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    .chart1,
    .chart2,
    .chart3 {
      width: 31.7%;
      height: 550px;
      padding-top: 20px;
      border-radius: 5px;
      border: solid 1px #efefef;
      box-shadow: 0 2px 2px -2px #000000;
      text-align: center;
      span {
        font-size: 18px;
        color: #93acce;
        font-weight: 700;
      }
      .china,
      .guangdong,
      .meizhou {
        width: 100%;
        height: 100%;
      }
    }
  }
  .chinamap {
    margin-top: 30px;
    padding: 0 20px;
    width: 100%;
    height: 500px;
    border: solid 1px #efefef;
    border-radius: 5px;
    box-shadow: 0 2px 2px -2px #000000;
  }
}
</style>
